import React, { useState } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import Bed from './Home/Home_Bed';
import Furnishing from './Home/Home_Furnishing';
import Kitchen from './Home/Home_Kitchen';
import Recommend from './Home/Home_Recommend';
//自定义封装nav组件
const NavBarItem = (props) => {
  let newAct = [false, false, false, false];
  newAct[props.index] = true;
  const {isActive,setIsActive,title}=props;
  return <TouchableOpacity style={isActive ? styles.navbarActiveItem : styles.navbarItem} activeOpacity={0.9}
    onPress={() => {
      setIsActive(newAct)
    }}
  >
    <Text style={isActive ? styles.navItemActiveText : styles.navItemText}>{title}</Text>
  </TouchableOpacity>
}
const NavBar = ({ isActive, setIsActive }) => {
  return <View style={styles.navbar}>
    <NavBarItem index={0} isActive={isActive[0]} setIsActive={setIsActive} title='推荐' />
    <NavBarItem index={1} isActive={isActive[1]} setIsActive={setIsActive} title='家居' />
    <NavBarItem index={2} isActive={isActive[2]} setIsActive={setIsActive} title='餐厨' />
    <NavBarItem index={3} isActive={isActive[3]} setIsActive={setIsActive} title='床上用品'  />
  </View>

}
const Home = ({ navigation }) => {
  //根据isActive控制样式
  const [isActive, setIsActive] = useState([true, false, false, false]);
  return (
    <View style={styles.container}>
      <NavBar navigation={navigation} isActive={isActive} setIsActive={setIsActive}/>
      {
        isActive[0]?<Recommend />:(isActive[1]?<Furnishing />:(isActive[2]?<Kitchen/>:<Bed/>))      
      }
      
    </View>

  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    width: '100%'
  },
  navbar: {
    backgroundColor: '#fff',
    width: '100%',
    height: height(90),
    flexDirection: 'row'
  },
  navbarItem: {
    width: '25%',
    borderBottomColor: '#fff',
    borderBottomWidth: 5,
    justifyContent: 'center',
    alignItems: 'center'
  },
  navItemText: {
    fontSize: 18,
    color: '#717171'
  },
  navbarActiveItem: {
    width: '25%',
    borderBottomColor: '#ffdb2c',
    borderBottomWidth: 5,
    justifyContent: 'center',
    alignItems: 'center'
  },
  navItemActiveText: {
    fontSize: 19,
    color: 'black'
  }
});
export default Home